<template>
  <a-typography-link href="#" id="a-typography-link-2">
    <a-typography-title :level="1" class="!text-[#212121] text-center" id="a-typography-title-3"
      >习近平同志关心推动民营经济发展纪实</a-typography-title
    >
  </a-typography-link>
  <a-flex justify="center" :gap="20" id="a-flex-4">
    <a-typography-link
      href="#"
      v-for="(item, index) in list"
      :key="index"
      class="!text-[#666] text-center"
      :id="`a-typography-link-5-${index}`"
    >
      【{{ item }}】
    </a-typography-link>
  </a-flex>
  <a-row class="!mx-0 my-4" :gutter="30" id="a-row-6">
    <a-col :span="8" class="!pl-0" id="a-col-7">
      <a-typography-link href="#" class="flex flex-col relative" id="a-typography-link-8">
        <a-image src="https://picsum.photos/id/12/1000/800" class="aspect-[2/1]" :preview="false" id="a-image-9" />
        <a-flex class="absolute inset-x-0 bottom-0 bg-gradient-to-b from-black/0 to-black/60 px-2" align="center" id="a-flex-10">
          <a-typography-paragraph class="text-lg text-white py-1 !mb-0 line-clamp-1 flex-1" id="a-typography-paragraph-11">
            习近平同志关心推动民营经济发展纪实
          </a-typography-paragraph>
          <a-flex :gap="5" id="a-flex-12">
            <a-typography-link
              href="#"
              class="h-3 w-3 rounded-full bg-white/50"
              v-for="index in nTopPages"
              :key="index"
              :class="{
                '!bg-[white]': index === currentTopPage,
              }"
              :id="`a-typography-link-13-${index}`"
            />
          </a-flex>
        </a-flex>
        <a-typography-link href="#" class="absolute left-2 top-1/2 -translate-y-1/2" id="a-typography-link-14">
          <LeftOutlined class="text-black/30 text-3xl" id="leftoutlined-15" />
        </a-typography-link>
        <a-typography-link href="#" class="absolute right-2 top-1/2 -translate-y-1/2" id="a-typography-link-16">
          <RightOutlined class="text-black/30 text-3xl" id="rightoutlined-17" />
        </a-typography-link>
      </a-typography-link>
      <a-flex align="center" class="pl-4 relative mt-4 mb-3" justify="space-between" id="a-flex-18">
        <a-divider type="vertical" class="mx-0 border-4 bg-[#F33030] absolute left-0 top-1/2 -translate-y-1/2 h-2/3" id="a-divider-19" />
        <a-typography-link href="#" class="!text-[#333] text-2xl font-bold" id="a-typography-link-20"> 焦点关注 </a-typography-link>
      </a-flex>
      <a-flex vertical :gap="10" id="a-flex-21">
        <a-typography-link
          href="#"
          v-for="(item, index) in list1"
          :key="index"
          class="text-lg !text-[#333] line-clamp-1"
          :id="`a-typography-link-22-${index}`"
        >
          {{ item }}
        </a-typography-link>
      </a-flex>
    </a-col>
    <a-col :span="8" class="flex flex-col" id="a-col-23">
      <a-flex vertical justify="space-between" class="flex-1" id="a-flex-24">
        <a-typography-link
          href="#"
          v-for="(item, index) in list2"
          :key="index"
          class="text-xl !text-[#333] line-clamp-1"
          :class="{
            'text-[#212121_!important] font-bold !text-2xl': index === 0 || index === 6,
          }"
          :id="`a-typography-link-25-${index}`"
        >
          {{ item }}
        </a-typography-link>
      </a-flex>
    </a-col>
    <a-col :span="8" class="!pr-0" id="a-col-26">
      <a-flex align="center" class="pl-4 relative mb-4" justify="space-between" id="a-flex-27">
        <a-divider type="vertical" class="mx-0 border-4 bg-[#F33030] absolute left-0 top-1/2 -translate-y-1/2 h-2/3" id="a-divider-28" />
        <a-typography-link href="#" class="!text-[#333] text-2xl font-bold" id="a-typography-link-29"> 能源评论 </a-typography-link>
      </a-flex>
      <a-timeline id="a-timeline-30">
        <a-timeline-item
          v-for="(item, index) in list3"
          :key="index"
          color="#F33030"
          :class="{
            '!pb-3': index !== list3.length - 1,
            '!pb-0': index === list3.length - 1,
          }"
          :id="`a-timeline-item-31-${index}`"
        >
          <a-typography-link href="#" class="line-clamp-1 !text-[#333] text-xl" :id="`a-typography-link-32-${index}`">{{
            item
          }}</a-typography-link>
        </a-timeline-item>
      </a-timeline>
      <a-flex vertical class="-translate-y-5" id="a-flex-33">
        <a-typography-link href="#" class="flex flex-1" id="a-typography-link-34">
          <a-image src="https://picsum.photos/id/14/1000/800" :preview="false" class="aspect-[5/1]" id="a-image-35" />
        </a-typography-link>
        <a-flex align="center" class="pl-4 relative mt-3 mb-4" justify="space-between" id="a-flex-36">
          <a-divider type="vertical" class="mx-0 border-4 bg-[#F33030] absolute left-0 top-1/2 -translate-y-1/2 h-2/3" id="a-divider-37" />
          <a-typography-link href="#" class="!text-[#333] text-2xl font-bold" id="a-typography-link-38"> 能源党建 </a-typography-link>
        </a-flex>
        <a-timeline class id="a-timeline-39">
          <a-timeline-item
            v-for="(item, index) in list4"
            :key="index"
            color="#F33030"
            :class="{
              '!pb-3': index !== list4.length - 1,
              '!pb-0': index === list4.length - 1,
              '!absolute': index === list4.length - 1,
            }"
            :id="`a-timeline-item-40-${index}`"
          >
            <a-typography-link href="#" class="line-clamp-1 !text-[#333] text-xl" :id="`a-typography-link-41-${index}`">{{
              item
            }}</a-typography-link>
          </a-timeline-item>
        </a-timeline>
      </a-flex>
    </a-col>
  </a-row>
  <a-flex id="a-flex-44">
    <a-typography-link href="#" class="relative !text-[#c3000b] text-2xl px-1 font-bold pb-2" id="a-typography-link-45">
      热点专题
      <a-divider class="border-4 border-[#c3000b] absolute -bottom-0.5 inset-x-0 my-0" id="a-divider-46" />
    </a-typography-link>
  </a-flex>
  <a-divider class="border-[#c3000b] my-0" id="a-divider-47" />
  <a-flex class="my-8" align="center" :gap="30" id="a-flex-48">
    <a-typography-link href="#" id="a-typography-link-49">
      <LeftOutlined class="text-[#c3000b] text-4xl" id="leftoutlined-50" />
    </a-typography-link>
    <a-flex :gap="15" class="flex-1" id="a-flex-51">
      <a-typography-link href="#" v-for="(item, index) in list5" :key="index" class="flex flex-col" :id="`a-typography-link-52-${index}`">
        <a-image :src="item" :preview="false" class="rounded-md aspect-[7/4]" :id="`a-image-53-${index}`" />
      </a-typography-link>
    </a-flex>
    <a-typography-link href="#" id="a-typography-link-54">
      <RightOutlined class="text-[#c3000b] text-4xl" id="rightoutlined-55" />
    </a-typography-link>
  </a-flex>
</template>

<script setup>
  const nTopPages = 5;
  const currentTopPage = 1;
  const list = ['《习近平经济文选》第一卷出版发行', '《习近平经济文选》第一卷主要篇目介绍', '《经济工作必须统筹好几对重要关系》'];
  const list1 = [
    '业绩失速与股权绑定争议下，优优绿能IPO闯关',
    '东方时尚徐劲松被罢免董事长 因任职期间管理混乱、战略方向不明',
    '扬州亚星客车连续两年案件信披不及时被出具警示函曾主动提出资本退市',
    '乐山商业银行APP隐私不合规被公开通报此前曾启动港股上市辅导工作',
    '操纵期货合约 渤海期货旗下公司遭证监会罚没2040万',
    '采埃孚起诉东安动力专利侵权 涉及8AT变速器',
    '正威新材更名为九鼎新材 与中车风电买卖合同纠纷一案一',
  ];
  const list2 = [
    '从各地“任务书”看决胜“十四五”',
    '五部门引导金融机构“一视同仁”对待各类所有制企业',
    '固态电池产业量产进程提速 全产业链共同推动降本提质',
    '“十四五”102项重大工程98 %以上的项目已完成规划目标',
    '外贸订单UP！巨型风电扇叶、钢制家具等加速“出海”',
    '家电回收产业迎爆发式增长 将突破2亿台',
    '“技术普惠”促进全球绿色转型',
    '山东本轮降雪为何来势汹汹？还要下多久？专家解读来了',
    '民爆行业整合进行时 产业集中度加速提升',
    '煤炭“遇冷” 四年来最低点！两大煤炭协会呼吁控制产量',
    '3月1日起，城市绿色货运、动力蓄电池维修等领域一批国家标准开始实施',
    '暴雪、寒潮、大雾，中央气象台发布多个黄色预',
  ];
  const list3 = [
    '代表委员的建议能被采纳吗？（读者点题·共同关注）',
    '从各地“任务书”看决胜“十四五”',
    '“技术普惠”促进全球绿色转型（和音） ——坚定做“赋能型大国”④',
    '为基础研究注入更多“源头活水”（创新谈）',
  ];
  const list4 = [
    '反腐败一步不停歇、半步不退让（思想纵横）',
    '深入推进党风廉政建设和反腐败斗争 以全面从严治党新成效为推进中国式现代化提供坚强保障',
    '奋力推动新时代党员教育培训高质量发展',
    '以减负新成效为实干赋能（大家谈）',
    '眼下有经济效益的水电站，为什么要关停？（干',
  ];
  const list5 = [
    'https://picsum.photos/id/18/1000/800',
    'https://picsum.photos/id/19/1000/800',
    'https://picsum.photos/id/20/1000/800',
    'https://picsum.photos/id/21/1000/800',
    'https://picsum.photos/id/22/1000/800',
    'https://picsum.photos/id/23/1000/800',
  ];
</script>
<style></style>
